import React, { useEffect, useState } from 'react'
import TopNavbar from '../../components/TopNavbar'
import { useNavigate } from 'react-router-dom'
import styles from './index.module.css'
import { fetchAreas } from '../../services/registerService'

const RegisterAreas = () => {
  const navigate = useNavigate()
  const [areas, setAreas] = useState([])
  useEffect(() => {
    fetchAreas().then(setAreas)
  }, [])
  return (
    <div className={styles.page}>
      <TopNavbar title="院区列表" showBack onBack={() => navigate(-1)} />
      <div className={styles.container}>
        <div className={styles.tip}>请选择院区</div>
        {areas.map(item => (
          <div key={item.id} className={styles.areaItem} onClick={() => navigate('/register', { state: { areaId: item.id } })}>
            <div className={styles.areaIcon}>📍</div>
            <div className={styles.areaMeta}>
              <div className={styles.areaName}>{item.name}</div>
              <div className={styles.areaAddr}>{item.address}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default RegisterAreas


